<template>
  <div  class="image-background">
    <el-container><br>
      <el-header style="width: 100%;height: 390px;background-color:gainsboro;">
        <el-container>
          <el-aside width="300px" style="text-align: center;">
            <img :src="'http://localhost:55799/Imge/'+form.traceabilityIamnges" 
            style="width: 300px;height: 300px;margin-top: 50px;">
          </el-aside>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <el-container>
              <el-header style="height: 180px;width: 800px;">
                <div style="float: left;margin: 30px;">
                 <span style="font-size: 40px;font-weight: bold;">{{ "兔头 (麻辣味)" }}</span><br>
                  生产批次：<span style="font-weight: bold;">{{ form.traceabilityBatch }}
                  </span><br><br>
                  生产许可证号：<span style="font-weight: bold;">{{ form.traceabilityNumber }}
                  </span> <br>
                </div>
                <div style="float: left;margin: 90px;">
                    保质期：<span style="font-weight: bold;">{{ form.traceabilityDay }} 天
                  </span> <br><br>
                    生产企业：<span style="font-weight: bold;">{{ form.traceabilityLicense }}
                  </span>
                </div> 
                <!-- </el-aside> 哈哈哈哈哈-->
              </el-header>
              <el-main>
                <span style="font-size: 20px;font-weight: bold;">产品检验报告</span>
                <!-- 照片 -->
                <el-upload
                    class="avatar-uploader"
                    v-model:file-list="form.Image"
                    action="http://localhost:55799/api/Trace/UpdateFile"
                    list-type="picture-card"
                    :on-remove="handleRemove"
                    :on-success="AddSuccess">
                    <el-icon><Plus /></el-icon>
                  </el-upload>
                </el-main>
            </el-container>
        </el-container>
      </el-header>
      <br>
      <el-tabs v-model="form.radio" type="card" 
      @tab-click="handleClick" :stretch="true" style="width: 800px;">
        <el-tab-pane label="养殖信息 (5/5)" name="TraceFarming"><TraceFarming/></el-tab-pane>
        <el-tab-pane label="屠宰信息 (5/5)" name="TraceCarcass"><TraceCarcass/></el-tab-pane>
        <el-tab-pane label="深加工信息 (5/5)" name="TraceProcessing"><TraceProcessing/></el-tab-pane>
      </el-tabs>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import TraceFarming from '../Traceability/TraceFarming.vue';
import TraceCarcass from '../Traceability/TraceCarcass.vue';
import TraceProcessing from '../Traceability/TraceProcessing.vue';

import axios from 'axios';
import { onMounted, reactive } from 'vue';
import { useRoute } from 'vue-router';

const route=useRoute()
const form=reactive({
  traceabilityId:route.query.traceabilityId,
  traceabilityIamnges:'',
  traceabilityBatch:'',
  traceabilityDay:'',
  traceabilityNumber:'',
  traceabilityLicense:'',
  Image:[],
  radio:'TraceFarming'
})
//图片
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
//产品检验图删除
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleRemove= (uploadFile:any) => {
  console.log(uploadFile)
  axios.delete('Trace/DeletePhoto', {
    params: {
      url:uploadFile.url
    }
  }).then((ret) => {
    console.log(ret.data)
    if(ret.data>0){
      ElMessage.success('删除成功')
    }else{
      ElMessage.error('删除失败')
    }
  })
}
 
//产品检验报告图片
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const AddSuccess=(Imge:any)=>{
  Imge='http://localhost:55799/Imge/'+Imge
  form.Image=Imge
  axios.post(`Trace/AddPhoto`,{
    photoImge:form.Image,
    traceabilityId:form.traceabilityId,
    traceabilityBatch:form.traceabilityBatch
  }).then((ret) => {
    console.log(ret.data)
    if(ret.data>0){
      ElMessage.success('添加成功')
    }else{
      ElMessage.error('添加失败')
    }
  })
}
//跳转
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleClick = (tab: any) => {
  console.log(tab.props.name)
}
//图片反填
const BackImge=()=>{
  axios.get('Trace/GetPhoto', {
    params: {
      id:form.traceabilityId
    }
  }).then((ret) => {
    console.log(ret.data)
    form.Image = ret.data
    console.log(form.Image);
  })
}
//钩子
onMounted(()=>{
  Fan()
})
//反填
const Fan=()=>{
  axios.get('Trace/GetId', {
    params: {
      id:form.traceabilityId
    }
  }).then((ret) => {
    console.log(ret.data)
    // form.goodId=ret.data.goodId
    form.traceabilityBatch=ret.data.traceabilityBatch
    form.traceabilityDay=ret.data.traceabilityDay
    form.traceabilityNumber=ret.data.traceabilityNumber
    form.traceabilityLicense=ret.data.traceabilityLicense
    form.traceabilityIamnges=ret.data.traceabilityIamnges
  })
  BackImge()
}

</script>

<style scoped>

</style>